<template>
  <div class="twoxm-cate-list">
    <div
    class="twoxm-cate-list-shop"
    v-infinite-scroll="getData"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="10"
    >
      <TwoxmCateItem
        v-for="shopItem in list"
        :key="shopItem.id"
        :id="shopItem.id"
        :image="shopItem.image"
        :title="shopItem.title"
        :price="shopItem.price"
        :saleNum="shopItem.saleNum"
      />
    </div>
    <div v-if="isEnd" class="dt-cate-list-more">没有更多了</div>
    <div v-else class="dt-cate-list-more">加载中...</div>
  </div>
</template>

<script>
import TwoxmCateItem from '@/components/MyCateItem'
export default {
  name: 'catelist',
  data () {
    return {
      list: [],
      nextIndex: 0,
      loading: false,
      isEnd: false
    }
  },
  components: {
    TwoxmCateItem
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.nextIndex = 0
    this.list = []
    this.getData()
    sessionStorage.setItem('cateId', to.params.cateId)
  },
  methods: {
    getData () {
      this.loading = true
      const { cateId } = this.$route.params
      this.$http.getCateList(cateId, this.nextIndex)
        .then(resp => {
          this.list = this.list.concat(resp.items.list)
          this.nextIndex = resp.items.nextIndex
          this.loading = false
          this.isEnd = resp.items.isEnd
        })
    }
  }
}
</script>

<style lang="scss">
.twoxm-cate-list {
  &-shop {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
